import React from 'react';
import { css, cx, palette } from '@mongodb-js/compass-components';

export const aiEntrySVGStyles = css({
  alignSelf: 'center',
  path: {
    transition: 'fill 0.16s ease-in',
  },
});

export const aiEntrySVGDarkModeStyles = css({
  path: {
    fill: palette.green.dark1,
  },
});

export const aiEntrySVGLightModeStyles = css({
  path: {
    fill: palette.green.dark2,
  },
});

export const DEFAULT_AI_ENTRY_SIZE = 16;

// Note: This is duplicated below as a string for HTML.
const AIEntrySVG = ({
  darkMode,
  size = DEFAULT_AI_ENTRY_SIZE,
}: {
  darkMode?: boolean;
  size?: number;
}) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 16 16"
    fill="none"
    className={cx(
      aiEntrySVGStyles,
      darkMode ? aiEntrySVGDarkModeStyles : aiEntrySVGLightModeStyles
    )}
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M6.27339 2.89343L5.27506 5.88842C5.17495 6.18877 4.93927 6.42445 4.63892 6.52456L1.64393 7.52289C1.18542 7.67573 1.18542 8.32427 1.64393 8.47711L4.63892 9.47544C4.93927 9.57555 5.17495 9.81123 5.27506 10.1116L6.27339 13.1066C6.42623 13.5651 7.07477 13.5651 7.22761 13.1066L8.22594 10.1116C8.32605 9.81123 8.56173 9.57555 8.86208 9.47544L11.8571 8.47711C12.3156 8.32427 12.3156 7.67573 11.8571 7.52289L8.86208 6.52456C8.56173 6.42445 8.32605 6.18877 8.22594 5.88842L7.22761 2.89343C7.07477 2.43492 6.42623 2.43492 6.27339 2.89343Z"
      fill="#00684A"
    />
    <path
      d="M12.5469 1.17194L12.3159 1.8651C12.2158 2.16545 11.9801 2.40113 11.6797 2.50125L10.9866 2.7323C10.7573 2.80872 10.7573 3.13299 10.9866 3.20941L11.6797 3.44046C11.9801 3.54058 12.2158 3.77626 12.3159 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.2551 4.0766C13.3552 3.77626 13.5909 3.54058 13.8912 3.44046L14.5844 3.20941C14.8136 3.13299 14.8136 2.80872 14.5844 2.7323L13.8912 2.50125C13.5909 2.40113 13.3552 2.16545 13.2551 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z"
      fill="#00684A"
    />
    <path
      d="M12.5469 11.2302L12.3159 11.9234C12.2158 12.2237 11.9801 12.4594 11.6797 12.5595L10.9866 12.7906C10.7573 12.867 10.7573 13.1913 10.9866 13.2677L11.6797 13.4988C11.9801 13.5989 12.2158 13.8346 12.3159 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.2551 14.1349C13.3552 13.8346 13.5909 13.5989 13.8912 13.4988L14.5844 13.2677C14.8136 13.1913 14.8136 12.867 14.5844 12.7906L13.8912 12.5595C13.5909 12.4594 13.3552 12.2237 13.2551 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z"
      fill="#00684A"
    />
  </svg>
);

// Note: This is duplicated above for react.
const getAIEntrySVGString = () => `<svg
  width="16"
  height="16"
  viewBox="0 0 16 16"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path d="M6.27339 2.89343L5.27506 5.88842C5.17495 6.18877 4.93927 6.42445 4.63892 6.52456L1.64393 7.52289C1.18542 7.67573 1.18542 8.32427 1.64393 8.47711L4.63892 9.47544C4.93927 9.57555 5.17495 9.81123 5.27506 10.1116L6.27339 13.1066C6.42623 13.5651 7.07477 13.5651 7.22761 13.1066L8.22594 10.1116C8.32605 9.81123 8.56173 9.57555 8.86208 9.47544L11.8571 8.47711C12.3156 8.32427 12.3156 7.67573 11.8571 7.52289L8.86208 6.52456C8.56173 6.42445 8.32605 6.18877 8.22594 5.88842L7.22761 2.89343C7.07477 2.43492 6.42623 2.43492 6.27339 2.89343Z" fill="#00684A"/>
  <path d="M12.5469 1.17194L12.3159 1.8651C12.2158 2.16545 11.9801 2.40113 11.6797 2.50125L10.9866 2.7323C10.7573 2.80872 10.7573 3.13299 10.9866 3.20941L11.6797 3.44046C11.9801 3.54058 12.2158 3.77626 12.3159 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.2551 4.0766C13.3552 3.77626 13.5909 3.54058 13.8912 3.44046L14.5844 3.20941C14.8136 3.13299 14.8136 2.80872 14.5844 2.7323L13.8912 2.50125C13.5909 2.40113 13.3552 2.16545 13.2551 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z" fill="#00684A"/>
  <path d="M12.5469 11.2302L12.3159 11.9234C12.2158 12.2237 11.9801 12.4594 11.6797 12.5595L10.9866 12.7906C10.7573 12.867 10.7573 13.1913 10.9866 13.2677L11.6797 13.4988C11.9801 13.5989 12.2158 13.8346 12.3159 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.2551 14.1349C13.3552 13.8346 13.5909 13.5989 13.8912 13.4988L14.5844 13.2677C14.8136 13.1913 14.8136 12.867 14.5844 12.7906L13.8912 12.5595C13.5909 12.4594 13.3552 12.2237 13.2551 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z" fill="#00684A"/>
</svg>
`;

export { getAIEntrySVGString, AIEntrySVG };
